<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>發文</title>
	
	 <link rel="stylesheet" type="text/css" href="<c:url value="/css/MapPublish.css"/>" />
	 <script type="text/javascript" src="<c:url value="/js/jquery-1.9.1.js" />"></script> 
	 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAUK3kd2zVFAGUQhsxayHnURJ1f6iauE6k&sensor=false" type="text/javascript"></script>
 	<script type="text/javascript" src="<c:url value="/js/MapPublish.js" />"></script>   
 
	<script type="text/javascript">
                                          
function clearForm() {
	var inputs = document.getElementsByTagName("input");
	for(var i=0; i<inputs.length; i++) {
		if(inputs[i].type=="text") {
			inputs[i].value="";
		}
	}
}
function checkFile(){
	var f = document.fileForm;
	var re = /\.(jpg|gif)$/i;  //允許的圖片副檔名
	if (!re.test(f.pic.value)) {		
		        alert("只允許上傳JPG或GIF影像檔");		
		    } else {	
		        var img = new Image();	
		        img.onload = checkImage();
		        img.src = f.pic.value;
		    }
}
var ImageSizeLimit = 100000;  //上傳上限，單位:byte
var ImageWidthLimit = 1200;  //圖片寬度上限
var ImageHeightLimit = 1000;  //圖片高度上限

function checkImage() {
//     alert("檔案大小為:"+document.+"bytes");
	    if ( this.width > ImageWidthLimit) {	
	        showMessage('寬度','px',this.width,ImageWidthLimit);	
	    } else if ( this.height > ImageHeightLimit) {
	        showMessage('高度','px',this.height,ImageHeightLimit);	
	    } else if ( this.fileSize > ImageSizeLimit) {	
	        showMessage('檔案大小','kb',this.fileSize/1000,ImageSizeLimit/1000);        	
	    } else {
	        document.FileForm.submit();
	    }
	}
function showMessage(kind,unit,real,limit) {
	    var msg = "您所選擇的圖片kind為 real unit\n超過了上傳上限 limit unit\n不允許上傳！";
	    alert(msg.replace(/kind/,kind).replace(/unit/g,unit).replace(/real/,real).replace(/limit/,limit));
	}

</script>
	<!-- google map api -->
	<script type="text/javascript">
	var map = null;
	$(function(){
		loadMap(initialize);
		
		$("#send").click(GetLocation);
	});
	  
	function GetLocation() {
	    var geocoder = new google.maps.Geocoder();
	    var address = $("#locationName").val();
	    geocoder.geocode({ 'address': address }, function (results, status) {
	        if (status == google.maps.GeocoderStatus.OK) {
	            var latitude = results[0].geometry.location.lat();
	            var longitude = results[0].geometry.location.lng();
	            console.log(address + "=> Latitude: " + latitude + "\nLongitude: " + longitude);
	            $("#x").val(latitude);
	            $("#y").val(longitude);
	            
	            showInfo(address, latitude, longitude);
	        } else {
	            alert("Request failed.")
	        }
	    });
	};
	function initialize() {
	    var mapOptions = {
	      center: new google.maps.LatLng(25.058740, 121.554892),
	      zoom: 13
	    };
	    map = new google.maps.Map(document.getElementById("map-canvas"),
	        mapOptions);

		
		showInfo("這裡是資策會", 25.058740, 121.554892);
	};
	function loadMap(initialize){
		google.maps.event.addDomListener(window, 'load', initialize);
	}

	function showInfo(content, lat, lng){
		var coordInfoWindow = new google.maps.InfoWindow();
		coordInfoWindow.setContent(content);
		coordInfoWindow.setPosition(new google.maps.LatLng(lat, lng));
		coordInfoWindow.open(map);
	}
	</script>
	<!-- google map api -->
</head>
<body>
<%@ include file="/menu.jsp" %> 
	<form action="<c:url value="/View/MapPublishPic.controller" />" 
             name="fileForm" method="POST" enctype="multipart/form-data">
				<input type="hidden" name="account" value="${user.account}"/>
		<table>
			<tbody>
			<tr>
				<td>標題:</td>
				<td><input type="text" name="title" value="${param.title}"/></td>
				<td>${errors.title}</td>
			</tr>
			<tr>
				<td>內容:</td>
				<td><textarea cols="40" rows="10" name="content" value="${param.content}" ></textarea><br></td>
				<td>${errors.content }</td>
			</tr>
			<tr>
				<td>圖片:</td>
				<td><input type="file" id="pic" name="pic" value="" onchange="checkFile();"/></td>
				<td>${errors.pic }</td>				
			</tr>	
			<tr>
				<td>位置:</td>
				<td><div id="map-canvas"></div></td>
			    <td></td>
			</tr>
			<tr>
				<td></td>
				<td>
				<input id="locationName" />
				<input type='button' id="send" value="尋找" />
				</td>
			    <td>
			    <input type="hidden" id="x" name="x_axis" value=""/>
			    <input type="hidden" id="y" name="y_axis" value=""/>
			    </td>
			</tr>
			<tr>
				<td>					
					<input type="submit" name="submit" value="發佈">
				<!-- 	<input type="submit" value="清除" onclick="clearForm()">  -->
				</td>
			</tr>
			</tbody>

		</table>
	</form>

</body>
</html>